import * as Cesium from "cesium";
import gsap from "gsap";
let typeNumber = 0;
export default class PolyLineMaterialPropetry {
  constructor(color = new Cesium.Color(0.7, 0.6, 1.0, 1.0)) {
    typeNumber++;
    this.num = typeNumber;
    this.color = color;
    this.definitionChanged = new Cesium.Event();
    // 往Cesium 材质缓存中添加自己的材质
    Cesium.Material._materialCache.addMaterial("PolyLineMaterial" + this.num, {
      fabric: {
        type: "PolyLineMaterial" + this.num,
        uniforms: {
          uTime: 0,
          color: this.color,
        },
        source: `
          czm_material czm_getMaterial(czm_materialInput materialInput)
          {
            // 生成默认的基础材质
            czm_material material = czm_getDefaultMaterial(materialInput);
            // uv
            vec2 st = materialInput.st;
            // 根据帧数计算Time 10 秒内从0到1变化
            float time = fract(czm_frameNumber / (60.0*10.0));
            // 0-1之间取一份为高亮,其余部分透明进行渐变 也就是十分之1部分为显示高亮部分
            time  = time * (1.0 + 0.1);
            // 平滑过度函数 smoothstep
            // 参数1:边缘1 参数2：边缘2 参数3：value值
            // 当边缘1 小于value值时返回0 当vlue值大于边缘2时返回1
            // 参数1:8
            // 参数2:10
            // 参数3 = 7 时 返回值为0
            // 参数3 = 9 时 返回值 0.5 因为 8 - 10 之间为9
            // 参数3 >= 10 时 返回值为1 因为到达边缘
            // 因此我们可以计算透明度 例如有一个线段 start--------(t-0.1)------(t)-------->end
            // 那么 t 到 (t-0.1) 这一部分为显示部分,材质长度小于t-0.1 透明为 0,材质长度大于等于t透明度为1,区间为动态计算
            // alpha = smoothstep(time-0.1,time,time);
            // 然后我们是有一条线段，我们指向要(t-0.1)到t这个范围显示,其余部分的材质不显示,
            // 从satrt到t-0.1 + t为一段，然后做一个绝对值取到t - end
            // step(-time,-st.s) 当b > a时， 返回1；当b < a时，返回0。
            float alpha = smoothstep(time-0.1,time, st.s) * step(-time,-st.s);
            // 如果想要有光轨迹效果，那么我们让透明部分不完全透明即可
            alpha += 0.05;
            // 设置材质透明度 设置颜色色值
            material.alpha = alpha;
            material.diffuse = color.rgb;
            return material;
          }
        `,
      },
    });
    this.params = {
      uTime: 0,
    };
    gsap.to(this.params, {
      uTime: 1,
      duration: 1,
      repeat: -1,
      yoyo: true,
    });
  }
  getType(time) {
    return "PolyLineMaterial" + this.num;
  }
  getValue(time, result) {
    // 用来设置和处理uniform变量
    result.uTime = this.params.uTime;
    return result;
  }
  equals(other) {
    // 实现判断两个材质是否相等
    return (
      other instanceof PolyLineMaterialPropetry && this.color == other.color
    );
  }
}
